<template>
  <div class="sysmsubgoods">
      <!-- <h2>用户提交商品管理</h2> -->
        <div class="title">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/sysout/sysoutshouye' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户提交商品管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 测试图片路径 -->
        <!-- <img src="../../../server/upload/1650114582959photo2.jpg" alt=""> -->
        <!-- <img :src="tableData[0].goodsImg" alt="" style="height:100px"> -->
        <!-- 搜索 -->
        <div class="header">
          <el-input @change="search" v-model="input" placeholder="可以根据商品名、类名、用户Id进行搜索"></el-input>
          <el-button type="primary">查询</el-button>
        </div>
        <div class="wrapper">
          <el-table :data="tableData" style="width: 100%"  border stripe height="700">
            <el-table-column prop="id" label="id" width="80"></el-table-column>
            <el-table-column prop="userId" label="用户id" width="80"></el-table-column>
            <el-table-column prop="userAccount" label="用户账号" ></el-table-column>
            <el-table-column prop="goodsName" label="商品名"></el-table-column>
            <el-table-column prop="goodsCategory" label="商品类别"></el-table-column>
            <el-table-column prop="goodsCategoryname" label="商品次级分类" width:190></el-table-column>
            <el-table-column prop="goodsImg" label="商品图片" width:80>
              <template v-slot:default="scope">
                <el-image :src="scope.row.goodsImg"/>
              </template>
            </el-table-column>
            <el-table-column prop="goodsRelateimg" label="商品相关图片" width=184>
              <template v-slot:default="scope">
                <el-image v-for="(rimg,index) in scope.row.goodsRelateimg.split(';').slice(0,-1)" :key="index" :src="rimg" style="width:60px;float:left;margin-right:2px"/>
              </template>
            </el-table-column>
            <el-table-column prop="goodsPrice" label="商品起拍价"></el-table-column>
            <el-table-column prop="goodsContent" label="商品描述"></el-table-column>
            <el-table-column prop="subTime" label="申请时间"></el-table-column>
            <el-table-column label="操作" width="240" fixed="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleClick(scope.row)">查看</el-button>
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  type="primary">发布</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">退回</el-button>
              </template>
          </el-table-column>
          </el-table>

          <!-- 弹框：发布商品 -->
          <el-dialog
          title="发布用户提交的商品"
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose">
          <!-- <span>这是一段信息</span> -->
          <!-- 弹框内容区域 -->
            <el-form :model="goodsForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="商品名" prop="goodsName" required>
                <el-input v-model="goodsForm.goodsName"></el-input>
              </el-form-item>
              <el-form-item label="商品类别" prop="goodsCategory" required>
                <el-input v-model="goodsForm.goodsCategory"></el-input>
              </el-form-item>
              <el-form-item label="次级类别" prop="goodsCategoryname">
                <el-input v-model="goodsForm.goodsCategoryname"></el-input>
              </el-form-item>
              <el-form-item label="起始价格" prop="goodsPrice" required>
                <el-input v-model="goodsForm.goodsPrice"></el-input>
              </el-form-item>
              <el-form-item label="开始时间" required>
                 <el-col :span="11">
                    <el-form-item prop="date1">
                      <el-date-picker type="date" placeholder="选择日期" v-model="date1" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="2">:</el-col>
                  <el-col :span="11">
                    <el-form-item prop="date2">
                      <el-time-picker placeholder="选择时间" value-format="HH:mm:ss" v-model="date2" style="width: 100%;"></el-time-picker>
                    </el-form-item>
                  </el-col>
              </el-form-item>
              <el-form-item label="结束时间" required>
                 <el-col :span="11">
                    <el-form-item prop="date3">
                      <el-date-picker type="date" placeholder="选择日期" v-model="date3" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="2">:</el-col>
                  <el-col :span="11">
                    <el-form-item prop="date4">
                      <el-time-picker placeholder="选择时间" value-format="HH:mm:ss" v-model="date4" style="width: 100%;"></el-time-picker>
                    </el-form-item>
                  </el-col>
              </el-form-item>
              <el-form-item label="商品图片" prop="goodsImg" required>
                <el-button type="primary" @click="getgoodsImg">点击获取用户给的商品图片</el-button>
                <img v-if="goodsForm.goodsImg" :src="goodsForm.goodsImg" alt="" style="height:100px">
              </el-form-item>
              <el-form-item label="相关图片" prop="goodsRelateimg" required>
                <el-button type="primary" @click="getgoodsRImg">点击获取相关图片</el-button>
                 <img v-for="(rimg,index) in goodsForm.goodsRelateimg.split(';').slice(0,-1)" :key="index" :src="rimg" height="100px" style="margin:10px;display:inline-block" alt="">
              </el-form-item>

              <el-form-item label="商品描述内容" prop="goodsContent" style="z-index: 100;" required>
                <WangEditor ref="myEditor" @sendEditor="sendEditor"/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getTime();submitForm('ruleForm')">确定发布</el-button>
              </el-form-item>
            </el-form>


          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
          </el-dialog>
  
          <!-- 弹窗：退回 -->
          <el-dialog
          title="输入退回的原因"
          :visible.sync="dialogVisibleBack"
          width="30%"
          :before-close="handleClose">

            <el-form :model="reasonForm" status-icon :rules="rules" ref="reasonForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="用户Id" prop="userIdBack" required>
                <el-input v-model="reasonForm.userIdBack"></el-input>
              </el-form-item>
              <el-form-item label="退回原因" prop="reasonBack" required>
                <el-input v-model="reasonForm.reasonBack"></el-input>
              </el-form-item>

              <el-form-item>
                <!-- 添加原因到数据库--并删除用户提交的商品 -->
                <el-button type="primary" @click="sendBack('reasonForm');">确定退回</el-button>
              </el-form-item>
            </el-form>
          
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
          </el-dialog>

        </div>
  </div>
</template>

<script>
// import '../../../../public/images'
import axios from 'axios'
export default {
    name:'SysMsubgoods',
    data() {
      return {
        input: "",
        timer:null,
        tableData: [],//操作的数据在这
        allData:[],//数据的数据放着
        url:'',//图片地址服务器
        relateUrl:'',
        fileList: [],
        dialogVisibleBack: false,
        dialogVisible: false,
        treedata:{},
        date1:'',
        date2:'',
        date3:'',
        date4:'',
        userId:'',
        reasonForm:{
          id:'',
          userIdBack:'',
          reasonBack:''
        },
        userSubgoods:[],
        goodsForm: {//表单容器对象
          goodsName: '',
          goodsContent: '',
          goodsPrice: '',
          goodsImg:'',
          goodsRelateimg: '',
          goodsCategory: '',
          goodsCategoryname: '',
          startTime:'',//商品竞拍开始时间
          endTime:'',//商品结束时间
        },
        rules: {//element组件校验规则
          goodsName: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
            { min: 4, max: 255, message: '长度在 4 到 255 个字符', trigger: 'blur' }
          ],
          goodsPrice: [
            { required: true, message: '请输入用户提交竞拍价', trigger: 'blur' }
          ],
          subTime: [
            { type: 'date', required: false, message: '请选择日期', trigger: 'change' }
          ],
        },
        // relateimg:[]
      };
    },
    created() {
      // this.getAllData()
      console.log("created",this.$store.state.user.usersubgoods)
    },
    mounted() {
      // console.log("aaaaaa",this.$store.state.user.usersubgoods)
      console.log("mounted",this.$store.state.user.usersubgoods)
      this.getAllData()
    },
    beforeDestroy() {
      clearTimeout(this.timer)
    },
    methods: {
      sendBack(formName){
        console.log(this.$refs[formName])
        this.$refs[formName].validate((valid)=>{
          if(valid){
            // 添加退回原因
            // 您的苹果手机的描述可以写充分点，方便我为您提交资讯
            axios.get("http://localhost:8080/api/addSendback/addSendbacklist",{
                params:{
                  userId:this.reasonForm.userIdBack,
                  reason:this.reasonForm.reasonBack
                }
              }).then(
                res=>{
                  this.$message({
                    type: 'info',
                    message: '删除成功'
                  }); 
                },
                error=>{
                  console.log("88",error.message)
                }
              )
            // 执行删除操作--执行删除数据库操作--请求接口
              axios.get("http://localhost:8080/api/deleteSubgoods/deleteSubgoodslist",{
                params:{
                  id:this.reasonForm.id
                }
              }).then(
                res=>{
                  this.$message({
                    type: 'info',
                    message: '退回成功'
                  }); 
                  // 视图更新
                  this.$router.go(0)
                },
                error=>{
                  console.log("88",error.message)
                }
              )
          }else{
            this.$message({
              type: 'info',
              message: '退回错误'
            }); 
          }
        })
      },
      clearForm(){
          // 清空表单
          this.$refs.ruleForm.resetFields()
          // 单独清空富文本编辑器
          this.$refs.myEditor.editor.txt.clear()
          this.date1 = ''
          this.date2 = ''
          this.date3 = ''
          this.date4 = ''
          this.goodsForm.goodsImg = ''
          this.goodsForm.goodsRelateimg = ''
      },
      // 提交所填的表
      submitForm(formName){
        console.log(this.$refs[formName])
        this.$refs[formName].validate((valid)=>{
          if(valid){
            axios.get("http://localhost:8080/api/addGoods/addGoodslist",{
              params:{
                goodsName:this.goodsForm.goodsName,
                goodsPrice:this.goodsForm.goodsPrice,
                goodsCategory:this.goodsForm.goodsCategory,
                goodsCategoryname:this.goodsForm.goodsCategoryname,
                goodsImg:this.goodsForm.goodsImg,
                goodsRelateimg:this.goodsForm.goodsRelateimg,
                maxPrice:this.goodsForm.goodsPrice,
                goodsContent:this.goodsForm.goodsContent,
                isPay:0
              }
            }).then(
              res=>{
                this.$message({
                    message:'添加成功',
                    type:'success'
                  })
                // console.log("添加成功")
              },
              error=>{
                console.log("b",error.message)
              }
            );
            axios.get("http://localhost:8080/api/addGoodsPub/addGoodsPublist",{
              params:{
                userId:this.userId,
                goodsName:this.goodsForm.goodsName,
                goodsCategoryname:this.goodsForm.goodsCategoryname,
                startTime:this.goodsForm.startTime,
                endTime:this.goodsForm.endTime,
              }
            }).then(
              res=>{
                this.$message({
                    message:'添加成功',
                    type:'success'
                  })
                // console.log("添加成功")
              },
              error=>{
                console.log("b",error.message)
              }
            );
          }else{
            console.log("提交错误")
            return false
          }
        })
      },
      handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
      },
      getTime(){
          var date1 = this.formatDateTime(this.date1)
          var date3 = this.formatDateTime(this.date3)
          this.goodsForm.startTime = date1 + ' ' + this.date2
          this.goodsForm.endTime = date3 + ' ' + this.date4
          if(this.goodsForm.startTime>this.goodsForm.endTime){
            this.goodsForm.endTime = ''
            this.date4 = ''
            this.date3 = ''
            alert("商品拍卖结束时间需要比开始时间晚,请重新输入")
          }
          console.log(this.goodsForm.startTime,this.goodsForm.endTime)
          console.log(this.goodsForm,this.tableData)
      },
      // 获取商品图片
      getgoodsImg(){
      //  console.log("jj",this.goodsForm.goodsContent)
      //  console.log('kk',this.tableData[0].goodsContent)
       for(var i=0;i<this.tableData.length;i++){
         if(this.tableData[i].goodsContent.indexOf(this.goodsForm.goodsContent) != -1 && this.goodsForm.goodsContent!=''){
           this.goodsForm.goodsImg = this.tableData[i].goodsImg 
           this.userSubgoods.push(this.tableData[i])
           this.userId = this.tableData[i].userId
           console.log("根据内容搜索的需要竞拍商品结果",this.userSubgoods[0],this.userSubgoods[0].length)
          //  console.log('测试布尔值',this.userSubgoods[0].goodsContent.indexOf(this.goodsForm.goodsContent) != -1,this.goodsForm.goodsCategory==this.userSubgoods[0].goodsCategory,this.goodsForm.goodsCategoryname==this.userSubgoods[0].goodsCategoryname,this.goodsForm.goodsImg==this.userSubgoods[0].goodsImg,this.goodsForm.goodsName==this.userSubgoods[0].goodsName,this.goodsForm.goodsPrice==this.userSubgoods[0].goodsPrice)
         }
       }
       if(this.goodsForm.goodsImg == ''){
         alert("你输入的商品用户没有提交过")
       }
      },
      getgoodsRImg(){
        for(var i=0;i<this.tableData.length;i++){
         if(this.tableData[i].goodsContent.indexOf(this.goodsForm.goodsContent) != -1 && this.goodsForm.goodsContent!=''){
           this.goodsForm.goodsRelateimg = this.tableData[i].goodsRelateimg
           console.log(this.goodsForm.goodsRelateimg)
         }
       }
       if(this.goodsForm.goodsRelateimg == ''){
         alert("你输入的商品用户没有提交过")
       }
      },
      formatDateTime (date) {
          var date = new Date(date)
          var y = date.getFullYear();
          var m = date.getMonth() + 1;
          m = m < 10 ? ('0' + m) : m;
          var d = date.getDate();
          d = d < 10 ? ('0' + d) : d;
          // return y + '-' + m + '-' + d+' '+h+':'+minute;
          return y + '-' + m + '-' + d
      },
      // 接收wangeditor文本数据
      sendEditor(val){
        this.goodsForm.goodsContent = val
        // console.log("222",this.goodsForm.goodsContent)
      },
      //发布商品
      handleEdit(index,row){
          this.dialogVisible = true
          // 将该行数据放入form表中
          this.goodsForm = row
          this.userId = row.userId
          console.log("该行的数据为",this.goodsForm)
          // 设置富文本的数据内容
          this.$nextTick(()=>{//数据更新之后还要继续对这个里面的数据进行操作
            this.$refs.myEditor.editor.txt.html(row.goodsContent)
            console.log("this.$refs.myEditor",this.$refs.myEditor,this.$refs.myEditor.editor.txt.html(row.goodsContent))
          })
      } ,
      // 获取用户提交数据  
      getAllData(){
          this.timer =setTimeout(()=>{
            for(var i=0;i<this.$store.state.user.usersubgoods.length;i++){
            // console.log("AA",this.relateimg,this.$store.state.user.usersubgoods[i].goodsRelateimg)
            // console.log(this.$store.state.user.usersubgoods[i].goodsRelateimg.split(';').slice(0,-1))
            this.allData.push(this.$store.state.user.usersubgoods[i])
          }
          this.tableData = this.allData 
          console.log("user中的值",this.$store.state.user.usersubgoods)
          console.log("BBB",this.tableData,this.allData,this.allData.length)
        },100)
          // var a = []
          // a.push(this.allData[0])
          // a.push(this.allData[1])
          // console.log("a",a)
      },
      // 删除事件---确认
      handleDelete(index,row){
        console.log("删除行数据为：",index,row,row.id)
        this.$confirm('此操作将商品退回用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dialogVisibleBack = true
          this.reasonForm.id = row.id
          this.reasonForm.userIdBack = row.userId

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退回'
          });          
        });
      },
      // 查看事件
      handleClick(){
      },
      // 查找事件
      search(val){
          console.log("搜索了----",val,this.allData[0].userId)
          this.tableData = []
          if(val == ' '){
            this.tableData = this.allData
          }else{
            for(var i=0;i<this.allData.length;i++){
              if(this.allData[i].goodsName.indexOf(val) !==-1||this.allData[i].goodsCategory.indexOf(val) !==-1||this.allData[i].goodsCategoryname.indexOf(val) !== -1 || String(this.allData[i].userId).indexOf(val) !==-1){
              // if(this.allData[i].goodsName.indexOf(val) !==-1){
                this.tableData.push(this.allData[i])
              }
            }
            if(this.tableData == ''){
              alert("未找到你想要搜索的竞拍商品")
            }
          }
          console.log("查询结果为",this.tableData)
      }
    },
}
</script>

<style lang="less" scoped>
.sysmsubgoods {
  margin: 20px;
  width: 95%;

    .title{
      width: 95%;
      padding: 10px;
      background: #fff;
      border: 1px solid #eee;
      margin-bottom: 20px;
    }

    .header {
      display: flex;
      margin-bottom: 10px;
      button {
        margin-left: 20px;
      }
    }
}
.line{
    text-align: center;
}
</style>